import React from 'react';
import {Spin, Tabs} from 'antd';

import styles from './index.less';
import HeaderDropdown from "@/components/HeaderDropdown";
import {AndroidOutlined, AppleOutlined, AppstoreOutlined,} from "@ant-design/icons";

const {TabPane} = Tabs;

export type GlobalHeaderRightProps = {
  fetchingNotices?: boolean;
  onNoticeVisibleChange?: (visible: boolean) => void;
  onNoticeClear?: (tabName?: string) => void;
};
const AppDownloadView: React.FC = () => {

  const menuHeaderDropdown = (
    <>
      <Spin spinning={false} delay={300}>
        <Tabs className={styles.tabs}>
          <TabPane tab={<span><AndroidOutlined/>安卓</span>} key={"android"}>
            <div style={{textAlign: 'center', padding: '15px'}}>
              <div>请使用浏览器扫码下载</div>
              <img alt="logo" src="/android.png" style={{width: '280px'}}/>
            </div>
          </TabPane>
          <TabPane tab={<span><AppleOutlined/>苹果</span>} key={"apple"}>
            <div style={{textAlign: 'center', padding: '15px'}}>
              <div>请使用浏览器扫码下载</div>
              <img alt="logo" src="/apple.png" style={{width: '280px'}}/>
            </div>
          </TabPane>
        </Tabs>
      </Spin>
    </>
  );
  return (
    <HeaderDropdown overlay={menuHeaderDropdown}
                    overlayClassName={styles.popover}
                    placement="bottom"
                    trigger={['click']}>
       <span className={styles.noticeButton}>
         <AppstoreOutlined/>
         <span style={{color: '#fff', marginLeft: '5px'}}>APP下载</span>
       </span>
    </HeaderDropdown>
  );
};

export default AppDownloadView;
